<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>
<style>
body.modal-open {
    position: fixed;
    width: 100%;
}
.modal {
  background: rgba(0, 0, 0, 0.5);
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;

  display: none;
}
.modal-frame {
  position: absolute;
  left:10%;
  right:10%;
   top: 50%;
   transform: translateY(-50%);
  border: solid 1px #ddd; background: #fff;
  padding: 1em;
}
</style>
</head>
<body>
<div id="page">
<h2 class="page-header">滚动问题</h2><div class="page-back"><a href="">返回</a></div>
<div class="text-center">
  <a class="js-open-modal" href="javascript:" target="_blank" rel="external">打开弹窗</a>
  <div style="height:400px">
    <div>在手机页面上浏览</div>
    <img src="images/nav0.png" height="200" width="200">
  </div>
  <a class="js-open-modal" href="javascript:" target="_blank" rel="external">解决移动端滚动穿透带来的问题</a>
  <div style="height:400px"></div>
</div>
<div id="modal" class="modal">
  <div class="modal-frame">
    <div style="height:9em;overflow-y:auto;">
    滚动穿透解决方案<br>
   	滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    滚动穿透解决方案<br>
    </div>
  </div>
</div>
<!-- 当弹出框时  添加类 overflow:hidden禁止html  body 滚动条  滚动列表的滚动位置会丢失，会重置到没有滚动的状态，需要js进行还原.并且弹出页面的滚动条也被禁止了 -->
<!-- //  var modal = document.getElementById('modal'); // 弹窗对象
    modal.addEventListener('touchmove', function(e) {  
      e.preventDefault();
    }, false); -->
    <!-- 打开弹窗时给body添加类position:fixed;滚动列表的滚动位置会丢失，会重置到没有滚动的状态，通过js获取滚动条位置，调整位置即可 -->
<script>
(function() {
 
  // var ModalHelper = (function(bodyCls) {
  //   var scrollTop;
  //   return {
  //     afterOpen: function() {
  //       scrollTop = document.scrollingElement.scrollTop;
  //       document.body.classList.add(bodyCls);
  //       document.body.style.top = -scrollTop + 'px';
  //     },
  //     beforeClose: function() {
  //       document.body.classList.remove(bodyCls);
  //       // scrollTop lost after set position:fixed, restore it back.
  //       document.scrollingElement.scrollTop = scrollTop;
  //     }
  //   };
  // })('modal-open');

  function openModal() {
    document.getElementById('modal').style.display = 'block';
    ModalHelper.afterOpen();
  }
  function closeModal() {
    ModalHelper.beforeClose();
    document.getElementById('modal').style.display = 'none';
  }
  var btns = document.querySelectorAll('.js-open-modal');
  btns[0].onclick = openModal;
  btns[1].onclick = openModal;
  document.querySelector('#modal').onclick = closeModal;
})();
</script>
</body>
</html>>	